<template>
    <div id="home-nav">
      <!--顶部导航栏-->
      <div class="nav-bar">
        <nav-bar>
          <div slot="center">购物街</div>
        </nav-bar>
      </div>

      <!--窗口切换-->
      <tab-control class="tab-control tabControl" v-show="tabControl" :titles="['流行','新款','精选']" @tabClick="getTabClick" ref="offsetTop2"></tab-control>

      <better-scroll
        class="content"
        ref="backTop"
        :probe-type="3"
        @betterScroll="contentScroll"
        :pull-up-load="true"
        @pullingUp="loadMode">
        <!--轮播图-->
        <div class="padTop">
          <home-swiper :banner="banners" @loadImg="loadImg"></home-swiper>
        </div>
        <!--分类-->
        <recommend-view :recommend="recommends"></recommend-view>
        <!--本周流行-->
        <feature-view></feature-view>
        <!--窗口切换-->
        <tab-control class="tab-control" :titles="['流行','新款','精选']" @tabClick="getTabClick" ref="offsetTop"></tab-control>
        <!--商品数据-->
        <goods-list-item :goods="showGoods"></goods-list-item>
      </better-scroll>

      <!--监听组件事件-->
      <back-top @click.native="backClick" v-show="position"></back-top>
    </div>
</template>

<script>
  import {getHomeMultidata,getHomeGoods} from "../../network/home";
  import {debounce} from "../../common/utils";
  import NavBar from "components/common/navbar/NavBar";
  import HomeSwiper from "views/home/childComps/HomeSwiper";
  import RecommendView from "views/home/childComps/RecommendView";
  import FeatureView from "views/home/childComps/FeatureView";
  import TabControl from "components/content/tabcontrol/TabControl";
  import GoodsListItem from "components/content/goods/GoodsListItem";
  import BetterScroll from "components/common/betterscroll/BetterScroll";
  import BackTop from "components/content/backtop/BackTop";
  import {backTopMixin} from "common/mixin";

  export default {
    name: "Home",
    components: {
      NavBar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      TabControl,
      GoodsListItem,
      BetterScroll,
      BackTop,
      debounce,
      backTopMixin
    },
    mixins:[backTopMixin],
    data(){
      return {
        banners: [],
        recommends: [],
        goods:{
          'pop': {page: 0,list: []},
          'new': {page: 0,list: []},
          'sell': {page: 0,list: []}
        },
        currentIndex: 'pop',
        offsetTop: 0,
        tabControl: false,
        saveY: 0
      };
    },
    created() {
      //请求多个数据
      this.getHomeMultidata();

      //请求商品数据
      this.getHomeGoods('pop');
      this.getHomeGoods('new');
      this.getHomeGoods('sell');
    },
    mounted() {
      const debounces = debounce(this.$refs.backTop.refresh,200);

      this.$bus.$on('itemImageLoad', () => {
        //refresh刷新与仿频繁处理刷新
        debounces();
      });
    },
    computed:{
      /**
       * 把商品数据传入子组件
       */
      showGoods(){
        return this.goods[this.currentIndex].list;
      }
    },
    methods: {
      loadImg(){
        this.offsetTop = this.$refs.offsetTop.$el.offsetTop;
      },
      /**
       * 上拉加载成功
       * */
      loadMode(){
        this.getHomeGoods(this.currentIndex);
      },
      /**
       * 请求多个数据
       * */
      getHomeMultidata(){
        getHomeMultidata()
          .then(res => {
            this.banners = res.data.data.banner.list;
            this.recommends = res.data.data.recommend.list;
          });
      },
      /**
       * 请求商品数据
       * @param type 类型
       */
      getHomeGoods(type){
        let page = this.goods[type].page + 1;
        getHomeGoods(type,page)
          .then(res => {
            this.goods[type].list.push(...res.data.data.list);
            this.goods[type].page++;
            this.$refs.backTop.finishPullUp();
          });
      },
      /**
       * 判断是哪个类型
       * @param index 子组件传过来的索引
       */
      getTabClick(index){
        switch (index) {
          case 0:
            this.currentIndex = 'pop';
            break;
          case 1:
            this.currentIndex = 'new';
            break;
          case 2:
            this.currentIndex = 'sell';
            break;
          default:
            this.currentIndex = 'pop';
        };
        this.$refs.offsetTop2.currentIndex = index;
        this.$refs.offsetTop.currentIndex = index;
      },
      backClick(){
        this.backTopClick();
      },
      contentScroll(position){
        this.tabControl = this.offsetTop <= -(position.y) ? true : false;

        this.listenShoBackTop(position);
      }
    },
    deactivated() {
      this.saveY = this.$refs.backTop.betterScrollY();
    },
    activated() {
      this.$refs.backTop.scrollTo(0, this.saveY, 0);
    }
  }
</script>

<style scoped>
  #home-nav{
    height: 100vh;
    position: relative;
  }
  .nav-bar{
    background-color: var(--color-tint);
    color: var(--color-background);
    /*position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;*/
  }
  .padTop{
    background-color: white;
  }

  .content{
    overflow: hidden;
    position: absolute;
    top: 49px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
  /*.content{
    height: calc(100% - 96px);
    margin-top: 49px;
    overflow: hidden;
  }*/

  .tabControl{
    position: relative;
    z-index: 9999;
  }
</style>
